<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>02_元素属性操作</title>
		<!-- 元素属性操作：元素    固定属性    附加属性 
		                固定属性<a href="#"></a>
						附加属性<input type="radio" checked>
		attr()          有参---1个参数，功能：获取匹配元素集合中的第一个元素的指定属性值
		                               理解：通过属性获取属性值
		                       2个参数，功能：【设置】匹配元素集合中所有元素的指定属性值
							           理解：通过属性和属性值 设置元素
									   语法：attr("属性"，"属性值")
		removeAttr()    有参---功能：移出匹配元素集合中所有元素的指定属性
		                       理解：移出属性--元素效果消失
		
		prop()
		removeProp()
		-->
	<script src="../js/jquery-1.11.1.js"></script>	
	</head>
	
	<body>
		<!-- img 1.gif 图片引入   三个按钮    id="getAttrBtn"      获取属性
		                                    id="setAttrBtn"       设置属性
											id="removeAttrBtn"    移出属性
		    div   id="output"   显示文本
		-->
		<h1>attr()函数与removeAttr()函数使用</h1>
		<img src="../img/1.gif" alt="" id="myImg" />
		<br>
		<button id="getAttrBtn">获取属性</button>
		<button id="setAttrBtn">设置属性</button>
		<button id="removeAttrBtn">移出属性</button>
		<div id="output"></div>
		<h2>练习：attr()函数</h2>
		<button class="gan">点击1</button>
		<button class="gbn">点击2</button>
		<button class="gcn">点击3</button>
		<a href="../jquery-1.11.1.zip" target="_blank">百度一下</a>
		<!-- 通过jq实现功能 ：点击1按钮，百度一下，实现真实页面跳转
		     通过jq实现功能 ：点击2按钮，百度一下，实现下载功能
			 通过jq实现功能 ：点击3按钮，页面上视频播放器
		 -->
		<script>
			// 抓到 getAttrBtn 按钮--点击---img图片元素的attr("src")属性
		    //                             output显示文本：img的src路径是：+变量
			$("#getAttrBtn").click(function(){
			    //通过元素固定属性名，获取到属性值
			    var imgs=$("#myImg").attr("src");
			    $("#output").text("img的src路径是："+imgs);
		    });
			//上述代码：实现图片切换
			//$("#myImg").attr("src","../img/2.gif")
			$("#setAttrBtn").click(function(){
			    //通过元素固定属性名，获取到属性值
			    $("#myImg").attr("src","../img/1.gif");
			    $("#output").text("img的src路径是：../img/1.gif")
			});
			//移除属性    ---img图片元素  src
			$("#removeAttrBtn").click(function(){
			    $("#myImg").removeAttr("src");
			    $("#output").text("图片已经被移除了~~");
			});
			// 练习1
			$(".gan").click(function(){
				$("a").attr("href","https://www.baidu.com/?a=1");
			});
			//练习2
			$(".gbn").click(function(){
				$("a").attr("href","../js/jquery-1.11.1.zip");
			});
			//练习3
			$(".gcn").click(function(){
				$("video").attr("autoplay","autoplay");
				$("out").text("上方是一个视频播放器")
			});
		</script>
	</body>
</html>